import { defineComponent, ref, computed } from 'vue'
import { NButton, useMessage } from 'naive-ui'
import * as monaco from 'monaco-editor'
import MessageBox from '@/components/nComponents/MessageBox'
import type { illustrateState } from '@/types/form'
import { dashToCamelCase } from '@/utils'
export default defineComponent({
  name: 'CodeEdit',
  emits: ['save', 'desc'],
  setup(props, { emit, expose }) {
    const dataBox = ref()
    const title = ref('')
    const show = ref(false)
    const message = useMessage()
    const isFullscreen = ref(false)
    const fullChange = (e: boolean) => {
      console.log(e)
      isFullscreen.value = e
    }
    const codeStyle = computed(() => {
      const style: any = {}
      if (isFullscreen.value) {
        style.flex = 1
      } else {
        style.height = '60vh'
      }
      return style
    })
    const handSave = () => {
      try {
        let textValue = editor.getValue()
        if (textValue && language === 'json') {
          const newVal = JSON.parse(textValue)
          if (Object.keys(newVal).length === 0) {
            textValue = undefined
          }
          if (newVal) {
            textValue = {}
            for (const newValKey in newVal) {
              textValue[dashToCamelCase(newValKey)] = newVal[newValKey]
            }
          }
        }
        emit('save', textValue)
        close()
      } catch (e: any) {
        console.log(e)
        message.error('格式不正确')
        return
      }
    }
    let language = 'javascript'
    let editor: any = null
    const isDesc = ref(false)
    const initEditor = (info: illustrateState) => {
      if (!info?.language) {
        info.language = 'javascript'
      }
      if (info.language === 'json') {
        info.value = info?.value ? JSON.stringify(info.value, null, '\t') : '{}'
      }
      language = info.language
      editor = monaco.editor.create(dataBox.value, {
        theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
        value: info.value || '', //编辑器初始显示文字
        readOnly: false,
        automaticLayout: true,
        language: info.language,
        folding: true, //代码折叠
        roundedSelection: true, // 右侧不显示编辑器预览框
        autoIndent: 'keep' // 自动缩进
      })
    }
    let inluInfo: illustrateState | any = null
    const open = (info: illustrateState) => {
      inluInfo = info
      title.value = info.title
      isDesc.value = info.isDesc
      show.value = true
      setTimeout(() => {
        initEditor(info)
      }, 200)
    }
    const close = () => {
      show.value = false
    }
    const handDesc = () => {
      emit('desc', inluInfo.key)
    }
    expose({
      open
    })
    return () => (
      <>
        <MessageBox
          v-model={show.value}
          title={title.value}
          width="800px"
          is-desc={isDesc.value}
          onFull={fullChange}
          onDesc={handDesc}
          v-slots={{
            default: () => (
              <>
                <div class="codeBox" ref={dataBox} style={codeStyle.value}></div>
                <div class="mt-[20px] btns flex justify-end">
                  <NButton type="primary" onClick={handSave}>
                    保存
                  </NButton>
                </div>
              </>
            )
          }}
        />
      </>
    )
  }
})
